<template>
    <right-layout class="add-user tabclass1" :visible.sync="show" :title="title" @closeLayout="closeLayout">
        <!-- <el-tabs v-model="activeName" @tab-click="addtabclick">
            <el-tab-pane label="快速添加" name="1" lazy>
            </el-tab-pane>
            <el-tab-pane label="邮件邀请" name="2" lazy>
                <el-form :model="emailForm" :rules="emailFormrule" ref="emailForm" label-width="100px">
                    <el-row>
                        <el-col :span="23">
                            <el-form-item label="注册地址：">
                                <div>
                                    <el-input readonly v-model="emailForm.url"></el-input>
                                </div>
                                <p class="tips">发送注册地址给企业成员，邮件人员可以通过该地址直接注册帐号，如果地址泄漏，请重新生成</p>
                            </el-form-item>
                        </el-col>
                        <el-col :span="1">
                            <div class="iconfresh">
                                <i class="icon el-icon-refresh-right" @click="getTokentFun(true)"
                                    style="cursor: pointer"></i>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="邮箱地址：">
                                <el-row v-if="isplus">
                                    <el-input type="textarea" :rows="3" v-model="emailForm.objIds"
                                        placeholder="此处粘接Email,每行一个">
                                    </el-input>
                                </el-row>
                                <el-row v-else>
                                    <div v-for="(item, index) in emailForm.emailList" :key="index">
                                        <el-col :span="23">
                                            <el-input @change="inputEmail($event,item)" v-model="item.url"
                                                style="margin-bottom:10px"></el-input>
                                        </el-col>
                                        <el-col :span="1" class="iconfresh" v-if="index!==0">
                                            <i class="icon el-icon-delete" style="cursor: pointer"
                                                @click="deleteEmail(index)"></i>
                                        </el-col>
                                    </div>

                                </el-row>
                                <el-row style="margin-top:10px">
                                    <el-button @click="addoneEmail" v-if="!isplus">增加一行</el-button>
                                    <el-button @click="plusEmail" v-if="!isplus">批量添加</el-button>
                                    <el-button @click="isplus=false" v-else>返回单行</el-button>
                                </el-row>

                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="链接注册" name="3" lazy>
                <el-form :model="urlForm" ref="urlForm" label-width="120px">
                    <el-row v-if="showtype=='3'">
                        <el-col :span="23">
                            <el-form-item label="通过地址注册：">
                                <div>
                                    <p>把以下地址发给指定人员，可以通过以下地址直接注册账号；如果怀疑地址泄露，可以通过更新按钮重新生成。</p>
                                    <el-input readonly v-model="urlForm.url"></el-input>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="1">
                            <div class="iconfresh">
                                <i class="icon el-icon-refresh-right" @click="getTokentFun2(true)"
                                    style="cursor: pointer"></i>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row v-if="showtype=='2'">
                        <el-col :span="24">
                            <el-form-item label="公司邮箱注册：">
                                <p>如果你公司有自己的域名邮箱并在企业设置中已设置，则拥有相同邮箱后缀的成员都可以通过系统的注册功能自己注册帐号。</p>
                                <div style="line-height:40px;background:#f1f1f1">
                                    {{urlForm.url}}
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-tab-pane>
        </el-tabs> -->
        <el-form :model="ruleForm" :rules="rules" ref="form" label-width="100px">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="姓名：" prop="username">
                        <el-input v-model="ruleForm.username"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="工号：" prop="employeeNo">
                        <el-input v-model="ruleForm.employeeNo"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="用户组：" prop="deptId">
                        <select-dept v-model="ruleForm.deptId" :label.sync="ruleForm.deptName">
                        </select-dept>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="手机：" prop="mobile">
                        <el-input v-model="ruleForm.mobile"></el-input>
                        <p class="tips">手机可作为客服人员的登录账号,不能重复</p>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="邮箱：" prop="email">
                        <el-input v-model="ruleForm.email"></el-input>
                        <p class="tips">邮箱可作为客服人员的登录账号,不能重复</p>
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- <el-row>
                        <el-col :span="24">
                            <el-form-item label="默认密码：" prop="loginPwd">
                                <el-input v-model="ruleForm.loginPwd"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row> -->
            <el-row>
                <el-col :span="24">
                    <el-form-item label="隐藏号码：" prop="isSecret">
                        <el-switch v-model="ruleForm.isSecret">
                        </el-switch>
                        <p class="tips">开启后，无法从通讯录中看到该号码</p>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="是否启用：">
                        <el-switch v-model="ruleForm.isSecret2">
                        </el-switch>
                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>
        <div slot="foot" v-if="activeName=='1'">
            <div class="left">
                <el-button @click="closeLayout" type="text">关闭</el-button>
            </div>
            <el-button type="success" @click="submitFun" :loading="loading">保存</el-button>
            <el-button type="success" @click="saveAndNew" :loading="loading">保存并新增</el-button>
            <el-button type="default" @click="resetForm">重置</el-button>
        </div>
        <div slot="foot" v-else-if="activeName=='2'">
            <div class="left">
                <el-button @click="closeLayout" type="text">关闭</el-button>
            </div>
            <el-button type="success" :loading="loading" @click="dosendEmailFun">发送邀请</el-button>

        </div>
        <div slot="foot" v-else>
            <div class="left">
                <el-button @click="closeLayout" type="text">关闭</el-button>
            </div>
            <el-button type="success" @click="doCopy" :disabled="showtype!=='2'&&showtype!=='3'">复制文案</el-button>
        </div>
    </right-layout>
</template>

<script>
    import moment from 'moment';
    import selectDept from '@/components/selectDept';
    import RightLayout from '@/components/layout/RightLayout';
    import selectPara from '@/components/selectPara';
    import selectRole from '@/components/selectRole';
    import {
        saveOrUpdateTent
    } from './service';
    import {
        getByIdTent
    } from '@/service/core/sysConfig/index';
    import {
        commPara
    } from '@/mixins/mixins';
    import {
        addDeptUser,
        newEmailPath,
        sendEmail
    } from "@/service/core/userManage";
    import {
        mapState
    } from 'vuex';
    export default {
        name: '', // 添加用户
        components: {
            RightLayout,
            selectPara,
            selectRole,
            selectDept
        },
        mixins: [commPara],
        data() {
            var validate_mobile = (rule, value, callback) => {
                if (value) {
                    callback();
                } else {
                    callback(new Error());
                }
            };
            return {
                title: '添加人员',
                show: false,
                loading: false,
                activeName: '1',
                isplus: false,
                showtype: '',
                ruleForm: {
                    id: '', // 主键
                    username: '',
                    employeeNo: '',
                    mobile: '',
                    email: '',
                    deptId: '',
                    deptName: '',
                    loginPwd: '', // 状态
                    isSecret: false,
                    isSecret2: true,
                },
                rules: {
                    username: [{
                        required: true,
                        message: '姓名必填',
                        trigger: 'blur'
                    }, {
                        min: 0,
                        max: 10,
                        message: '长度限制10位',
                        trigger: 'blur'
                    }],
                    employeeNo: [{
                        required: true,
                        message: '员工工号必填',
                        trigger: 'blur'
                    }, {
                        min: 0,
                        max: 10,
                        message: '长度限制10位',
                        trigger: 'blur'
                    }],
                    email: [{
                        pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
                        message: '邮箱格式错误',
                        trigger: 'blur'
                    }, {
                        min: 0,
                        max: 64,
                        message: '长度限制64位',
                        trigger: 'blur'
                    }],
                    mobile: [{
                            required: true,
                            message: '手机号必填',
                            trigger: 'blur'
                        }, {
                            min: 0,
                            max: 13,
                            message: '长度限制13位数字',
                            trigger: 'blur'
                        },
                        {
                            pattern: /^1[3456789]\d{9}$/,
                            message: '手机号错误',
                            trigger: 'blur'
                        }
                    ],
                },
                emailrule: {

                },
                emailForm: {
                    objIds: '',
                    url: '',
                    content: '',
                    subject: '',
                    emailList: [{
                        url: '',
                    }]
                },
                emailFormrule: {
                    objIds: [{
                        required: true,
                        trigger: 'blur',
                        message: '请填写邮箱'
                    }]
                },
                urlForm: {
                    url: '',
                }
            }
        },
        computed: {
            ...mapState({
                token: state => state.token.token,
                tenementId: state => state.token.tenementId,
                
            }),

        },

        methods: {

            saveJoinWay() { // 保存加入方式
                let params = {
                    id: this.tenementId,
                    joinWayCode: '3',
                    joinVal: this.urlForm.url
                }
                saveOrUpdateTent(params).then(res => {
                    if (res.data.code == 1000) {}
                })
            },
            doCopy() {
                this.$copyText(this.urlForm.url).then((e) => {
                    this.$notify({
                        title: "提示",
                        message: "复制成功！",
                        type: "success"
                    });
                }, (e) => {
                    this.$notify({
                        title: "提示",
                        message: "复制失败！",
                        type: "error"
                    });
                })
            },
            onCopy(e) {
                this.$notify({
                    title: "提示",
                    message: "复制成功！",
                    type: "success"
                });
            },
            onError(e) {
                this.$notify({
                    title: "提示",
                    message: "复制失败！",
                    type: "error"
                });
            },
            inputEmail(value, value2) {
                // console.log(val);
                if (value) {
                    setTimeout(() => {
                        var reg =
                            /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
                        if (!reg.test(value)) {
                            value2.url = ''
                            this.$notify({
                                title: "提示",
                                message: "格式错误",
                                type: "error"
                            });
                        }
                    }, 100);
                }
            },
            dosendEmailFun() {
                let objIds = ''
                if (this.isplus) {
                    objIds = this.emailForm.objIds
                } else {
                    let arr = []
                    this.emailForm.emailList.forEach((i) => {
                        arr.push(i.url)
                    })
                    objIds = arr.join()
                }
                let params = {
                    mesTypeId: 'MAIL',
                    mesTypeName: '邮件',
                    sendChanlCode: 'PC',
                    sendChanlName: 'PC',
                    objIds: objIds,
                    objNames: objIds,
                    title: this.emailForm.subject,
                    content: this.emailForm.content
                }
                // this.loading = true
                console.log(params);
                this.loading = true
                sendEmail(params).then(res => {
                    if (res.data.code == 1000) {
                        this.$notify({
                            title: '提示',
                            type: 'success',
                            message: '发送成功！'
                        })
                        this.resetemailForm()
                    }
                    this.loading = false
                })
            },
            resetemailForm() {
                this.emailForm = {
                    objIds: '',
                    url: '',
                    content: '',
                    subject: '',
                    emailList: [{
                        url: '',
                    }]
                }
                this.getTokentFun(false)
            },
            addtabclick(val) {
                if (val.name == '1') {
                    this.resetForm()
                } else if (val.name == '2') {
                    this.getTokentFun(false)
                } else if (val.name == '3') {
                    this.getshowType()
                }
            },

            getshowType() {
                let params = {
                    id: this.tenementId
                }
                this.urlForm.url = ''
                getByIdTent(params).then(res => {
                    if (res.data.code == 1000) {
                        let data = res.data.data
                        if (data) {
                            this.showtype = data.joinWayCode
                            this.urlForm.url = data.joinVal
                            if (this.showtype == '2') {
                                this.getTokentFun3(false)
                            }
                            if (this.showtype == '3') {
                                this.getTokentFun2(false)
                            }
                        }
                    }
                })
            },
            getTokentFun(flag) {
                let params = {
                    type: 'EMAIL',
                    isReset: flag
                }
                this.emailForm.url = ''
                this.emailForm.url = ''
                this.emailForm.subject = ''
                newEmailPath(params).then(res => {
                    if (res.data.code == 1000) {
                        let data = res.data.data
                        if (data) {
                            this.emailForm.url = data.url
                            this.emailForm.content = data.content
                            this.emailForm.subject = data.subject
                        }
                    }
                })
            },
            getTokentFun2(flag) {
                let params = {
                    type: 'LINK',
                    isReset: flag,
                    url: this.urlForm.joinVal
                }
                this.urlForm.url = ''
                newEmailPath(params).then(res => {
                    if (res.data.code == 1000) {
                        let data = res.data.data
                        if (data) {
                            this.urlForm.url = data.url
                            this.saveJoinWay()
                        }
                    }
                })
            },
            getTokentFun3(flag) {
                let params = {
                    type: 'GSYX',
                    isReset: flag,
                    url: this.urlForm.joinVal
                }
                this.urlForm.url = ''
                newEmailPath(params).then(res => {
                    if (res.data.code == 1000) {
                        let data = res.data.data
                        if (data) {
                            this.urlForm.url = data.url
                        }
                    }
                })
            },
            deleteEmail(index) {
                this.emailForm.emailList.splice(index, 1)
            },
            addoneEmail() {
                let obj = {
                    url: '',
                }
                this.emailForm.longEmail = ''
                if (this.emailForm.emailList[this.emailForm.emailList.length - 1].url != '') {
                    this.emailForm.emailList.push(obj)
                } else {
                    this.$notify({
                        title: '提示',
                        type: 'error',
                        message: '请输入邮件地址'
                    })
                }

                this.isplus = false

            },
            plusEmail() {

                this.emailForm.emailList = [{
                    url: '',
                }]
                this.isplus = true
            },
            showLayout() {
                this.title = '添加人员';
                this.show = true;
            },
            closeLayout() {
                this.show = false;
                setTimeout(() => {
                    this.resetForm();
                }, 500)
            },
            closeLayout1() {
                setTimeout(() => {
                    this.resetForm();
                }, 500)

            },
            resetForm() {
                this.ruleForm.isSecret2 = true
                this.$refs.form.resetFields();
            },
            submitFun() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        let params = {
                            id: this.ruleForm.id, // 主键
                            username: this.ruleForm.username,
                            employeeNo: this.ruleForm.employeeNo,
                            mobile: this.ruleForm.mobile,
                            email: this.ruleForm.email,
                            deptId: this.ruleForm.deptId,
                            deptName: this.ruleForm.deptName,
                            userStatusId: this.ruleForm.isSecret2,
                            
                            isSecret: Number(this.ruleForm.isSecret),
                        }
                        if (this.ruleForm.isSecret2) {
                            params.userStatusId = 'ACTIVE'
                        } else {
                            params.userStatusId = 'INACTIVE'
                        }
                        this.loading = true
                        addDeptUser(params).then(res => {
                            if (res.data.code == 1000) {
                                this.$notify({
                                    title: '提示',
                                    type: 'success',
                                    message: '保存成功！'
                                })
                                this.$emit('refresh');
                                this.closeLayout()
                            }
                            this.loading = false
                        })
                    }
                })
            },
            saveAndNew() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        let params = {
                            id: this.ruleForm.id, // 主键
                            username: this.ruleForm.username,
                            employeeNo: this.ruleForm.employeeNo,
                            mobile: this.ruleForm.mobile,
                            email: this.ruleForm.email,
                            deptId: this.ruleForm.deptId,
                            deptName: this.ruleForm.deptName,
                            isSecret: Number(this.ruleForm.isSecret),
                            
                            userStatusId: this.ruleForm.isSecret2,
                        }
                        if (this.ruleForm.isSecret2) {
                            params.userStatusId = 'ACTIVE'
                        } else {
                            params.userStatusId = 'INACTIVE'
                        }
                        this.loading = true
                        addDeptUser(params).then(res => {
                            if (res.data.code == 1000) {
                                this.$notify({
                                    title: '提示',
                                    type: 'success',
                                    message: '保存成功！'
                                })
                                this.$emit('refresh');
                                this.closeLayout1()
                            }
                            this.loading = false
                        })
                    }
                })
            },
        }
    }

</script>

<style lang="scss" scoped>
    .tips {
        color: rgb(153, 153, 153);
        font-size: 12px;
        line-height: 25px;
    }

    .iconfresh {
        text-align: center;
        font-size: 18px;
        line-height: 40px;
    }

    .add-user /deep/ .el-tabs__header {
        position: absolute;
        right: 20px;
        top: 15px;
    }

    .add-user {
        position: relative;

        .btn-wrap {
            text-align: right;
            padding-bottom: 10px;
        }
    }

    .page-wrap {
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;

        .flex-1 {
            overflow: hidden;
        }
    }

    .tabclass1 /deep/ .el-tabs__header {
        background: #f7f9fd !important;

    }

    .tabclass1 /deep/ .el-tabs__item.is-active {
        background: #f7f9fd !important;
        color: #333 !important
    }

    .tabclass1 /deep/ .el-tabs__header .el-tabs__item {
        color: #333 !important;
        /* padding-left:20px!important */
    }

</style>
